<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>易记</title>
    <!-- 调试工具 -->
    <script src="https://cdn.staticfile.org/react/16.8.6/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.8.6/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdn.bootcss.com/prop-types/15.7.2/prop-types.js"></script>

    <style>
        html {
            font-size: 100px;
        }

        .acc-book {
            width: 100vw;
            height: 100vw;
            font-size: .4rem;
        }

        input {
            width: 60vw;
            height: 10vw;
            border: 1px solid rgb(38, 178, 243);
            font-size: .4rem;
        }

        input:nth-of-type(1) {
            margin-top: 10vw;
        }

        input~input {
            margin-top: 2vw;
        }

        .dele {
            width: 15vw;
            height: 6vw;
            background-color: rgba(220, 0, 0, 0.795);
            font-size: .28rem;
            color: cornsilk;
            border-radius: 4rem;
            position: absolute;
            right: 10vw;
        }

        i {
            font-size: .36rem;
            color: rgb(0, 217, 255);
        }

        .new-add {
            width: 20vw;
            height: 8vw;
            font-size: .36rem;
            margin-top: 5vw;
            background-color: rgb(230, 89, 24);
            color: honeydew;
            letter-spacing: .1rem;
            border-radius: 12vw;
        }

        .income {
            color: rgb(68, 228, 24);
        }

        .pay {
            color: red
        }

        li {
            margin-top: .15rem;
            border-bottom: .02rem solid #adc;
            color: #adc;
        }

        li:nth-child(2n) {
            border-bottom: .02rem solid rgb(125, 150, 231);
            color: rgb(125, 150, 231);
        }

        .foot {
            position: absolute;
            bottom: 0;
            width: 100vw;
            height: 15vw;
            line-height: 15vw;
            background-color: #adc;
            margin-left: 10vw;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
    <script type="text/babel">

        //组件:用es6的class定义
        class AccBook extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    list: [
                        { content: "吃早饭", price: '-5', state: false }
                    ],
                    content: '',
                }
            }
            pay() {
                var mypay = 0
                this.state.list.map(function (ele, i) {
                    if (parseInt(ele.price) < 0) {
                        mypay += parseInt(ele.price)
                    }
                })
                return mypay
            }
            income() {
                var mytot = 0
                this.state.list.map(function (ele, i) {
                    if (parseInt(ele.price) > 0) {
                        mytot += parseInt(ele.price)
                    }
                })
                return mytot
            }
            add() {
                var obj = {
                    content: this.state.content,
                    price: this.state.price,
                    state: false
                }
                console.log(obj)
                console.log(obj.length)
                var list = this.state.list
                if (obj.content.length <= 0) {
                    alert('请先添加事件')
                } else {
                    list.push(obj)
                    this.setState({
                        list: list,
                    })
                }
            }
            del(index) {
                console.log("删除成功")
                var list = this.state.list
                list.splice(index, 1)
                this.setState({
                    list: list
                })
            }
            changeCon(e) {
                this.setState({
                    content: e.target.value
                })
            }
            changePri(e) {
                this.setState({
                    price: e.target.value
                })
            }
            render() {
                var _this = this
                return (
                    <div className="acc-book">
                        <h1 className="title">易记小账本</h1>
                        <p>
                            总收入：<label className="income">{this.income()}元</label>
                            <br />
                            总支出：<label className="pay">{this.pay() * (-1)}元</label>
                        </p>
                        <form>
                            事件：<input value={this.state.content} onChange={this.changeCon.bind(this)} />
                            <br />
                            金额：<input value={this.state.price} onChange={this.changePri.bind(this)} />
                            <br />
                        </form>
                        <i>( * 金额：输入正数为收入，负数为支出)</i>
                        <br />
                        <button onClick={this.add.bind(this)} className="new-add">新增</button>
                        <ol>
                            {
                                this.state.list.map(function (ele, i) {
                                    return (<li key={ele.content}>
                                        <label>{ele.content}</label> <label>{ele.price > 0 ? "收入" + ele.price : "支出" + ele.price * -1}元</label>
                                        <button onClick={_this.del.bind(_this, i)} className="dele">删除</button>
                                    </li>
                                    )
                                })
                            }
                        </ol>

                    </div>
                )
            }
        }

        //渲染与调用组建
        ReactDOM.render(
            <div>
                <AccBook></AccBook>
            </div>,
            document.getElementById('root')
        );


    </script>
</body>

</html>